import React, { useState } from 'react'
import {
  Form,
  Row,
  Col,
  Input,
  Button,
  Select,
  Cascader,
  DatePicker,
} from 'antd'
import {
  DownOutlined,
  UpOutlined,
  ClearOutlined,
  SearchOutlined,
} from '@ant-design/icons'
import '../SecondPages/SecondPages.css'
const { RangePicker } = DatePicker
const { Option } = Select
const AdvancedSearchForm = (props) => {
  const [expand, setExpand] = useState(false)
  const [form] = Form.useForm()
  const getFields = () => {
    const getFormItem = (item) => {
      let reItem
      if (item.type === 'input') {
        reItem = (
          <Input placeholder={item.placeholder} maxLength={item.maxLength} />
        )
      } else if (item.type === 'select') {
        reItem = (
          <Select placeholder="请选择" allowClear>
            {item.options.map((item) => (
              <Option key={item.code} value={item.code}>
                {item.label}
              </Option>
            ))}
          </Select>
        )
      } else if (item.type === 'cascader') {
        reItem = (
          <Cascader
            allowClear
            options={item.options}
            placeholder="请选择"
            changeOnSelect
          />
        )
      } else if (item.type === 'rangePicker') {
        reItem = <RangePicker allowClear />
      }
      return reItem
    }
    const len = props.formData.length
    const count = expand ? len : 4 > len ? len : 4
    const children = []
    for (let i = 0; i < count; i++) {
      if (props.formData[i].type === 'rangePicker') {
        children.push(
          <Col span={8} key={i}>
            <Form.Item
              key={props.formData[i].code}
              name={props.formData[i].code}
              label={props.formData[i].name}
            >
              {getFormItem(props.formData[i])}
            </Form.Item>
          </Col>
        )
      } else {
        children.push(
          <Col span={5} key={i}>
            <Form.Item
              key={props.formData[i].code}
              name={props.formData[i].code}
              label={props.formData[i].name}
            >
              {getFormItem(props.formData[i])}
            </Form.Item>
          </Col>
        )
      }
    }
    return children
  }

  const onFinish = (values: any) => {
    props.execSearch(values)
  }

  return (
    <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
    >
      <Row gutter={24}>
        {getFields()}
        <Col flex="auto" style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            搜索
          </Button>
          <Button
            style={{ margin: '0 8px' }}
            onClick={() => {
              form.resetFields()
            }}
            icon={<ClearOutlined />}
          >
            清除
          </Button>
          <a
            style={{ fontSize: 12 }}
            onClick={() => {
              setExpand(!expand)
            }}
          >
            {expand ? <UpOutlined /> : <DownOutlined />}
          </a>
        </Col>
      </Row>
    </Form>
  )
}

export default AdvancedSearchForm
